<template>
  <div class="activity-sheleves">
    <template v-if="compData.data.cardList.length>0">
      <div class="card" :style="cardStyle(index)" v-for="(item,index) in compData.data.cardList" :key="index">
        <div class="title">大牌补贴</div>
        <div class="goods-list sa-flex sa-row-center sa-col-center">
          <div class="goods sa-flex-col sa-row-center sa-col-center" v-for="(it,ind) in item.goodsList" :key="ind">
            <sa-image
              class="sa-m-r-8"
              :size="40"
              fit="cover"
              :url="it.image"
            />
            <div class="goods-price">￥{{it.price[0]}}</div>
          </div>
        </div>
      </div>

    </template>

  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import { computed,ref,onMounted } from 'vue';
  const props = defineProps(['compData']);
  onMounted(()=>{
    console.log("onMounted",props.compData.data.cardList[0].goodsList)
  })




  const cardStyle = (ind)=>{
    let url = checkUrl(props.compData.data.cardList[ind]?.bgImage);

    return {
      backgroundImage: `url(${url})`,
      backgroundSize: "100% 100%",
      backgroundOrigin: "padding-box",
      borderRadius:`${props.compData.data.databorderRadiusTop}rpx ${props.compData.data.borderRadiusTop}rpx ${props.compData.data.borderRadiusBottom}rpx ${props.compData.data.borderRadiusBottom}rpx`
    }
  }

  onMounted(()=>{
    console.log("activityShelves",props.compData);
  })

</script>

<style lang="scss" scoped>
  .activity-sheleves{
    display: flex;
    justify-content: space-between;
    align-content: center;
    width:100%;
    height:140px;
    .card{
      width:175px;
      height:140px;

      .title{
        font-family: PingFang SC;
        font-size: 12px;
        letter-spacing: 0em;
        color: #FFFFFF;
        margin-top: 5px;
        margin-left: 13px;
      }
      .goods-list{
        margin-top:30px;
        padding-left:10px;

        .goods{
          width:calc(100% - 10px);

          .goods-img{
            width:35px;
            height:35px;
            margin-top:8px;

          }
          .goods-price{

            width:33px;
            background: #FFDADA;
            border-radius: 10px;


            height:20px;
            display: flex;
            justify-content: center;
            align-content: center;
            padding-top: 3px;

            margin-top: 10px;
            font-family: PingFang SC;
            font-size: 10px;
            letter-spacing: 0em;

            color: #FF5858;

            width:50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

    }


    //.card:nth-child(1){
    //
    //  background-image: url("https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408161634533618.png");
    //  background-size: 100% 100%;
    //  background-origin: padding-box;
    //  margin-left: 10px;
    //
    //
    //}
    //
    //.card:nth-child(2){
    //
    //  background-image: url("https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408161634535286.png");
    //  background-size: 100% 100%;
    //  background-origin: padding-box;
    //  margin-right: 10px;
    //
    //
    //}

  }

</style>
